.cover {
  height: 100vh;
  width: 100vw;

  > .background {
    background-image: url("https://alioss.xiamoqwq.com/blog/gh/spirit1431007/cdn%401.6/img/kyotoanimation.png");
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    filter: blur(2px);
  }

  > .title {
    background-color: white;
    padding: 20px 20px 20px 35px;
    position: relative;
    box-shadow: 0 0 10px #00000040;

    &::before {
      position: absolute;
      content: "";
      background-color: #FF6B6B;
      width: 5px;
      height: 32%;
      border-radius: 10px;
      top: 30%;
      left: 20px;
    }

    span:nth-child(1) {
      font-size: 25px;
      color: black;

      > * {
        margin-left: 5px;
        font-size: 20px;
      }
    }

    *:nth-child(2) {
      display: inline-flex;
      font-size: 30px;
      position: absolute;
      right: 40px;
      color: #FFE155;
      animation: spin 2s infinite linear reverse;

      > input {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
      }
    }
  }

  > .scroll {
    height: calc(100% - 75px);
    width: 100vw;
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    > .item {
      width: 50%;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;

      > .border {
        height: 70%;
        width: 70%;
        position: relative;
        border-radius: 10px;
        box-shadow: 0 0 25px #00000070;
        top: 0;
        transition: all .3s;

        &:hover {
          //top: 4px;
          //box-shadow: 0 0 15px #00000050;
          transition: all .3s;

          > .image {
            > img {
              transform: rotateZ(-1.5deg) scale(1.08);
              transition: all .3s;
            }
          }

          > .remove {
            opacity: 1;
            transition: all .4s;
          }
        }

        > .image {
          height: 100%;
          width: 100%;
          overflow: hidden;
          border-radius: 10px;

          > img {
            border-radius: 10px;
            height: 100%;
            width: 100%;
            object-fit: cover;
            transform: rotateZ(0) scale(1);
            transition: all .3s;
          }
        }

        > .copy, > .copy-shadow {
          cursor: pointer;
          position: absolute;
          right: 0;
          bottom: 0;
          background-color: #A9C9FF;
          background-image: linear-gradient(293deg, #A9C9FF 0%, #FFBBEC 100%);
          color: white;
          width: 100px;
          height: 35px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-top-left-radius: 10px;
          border-bottom-right-radius: 10px;
          font-size: 14px;

          svg {
            color: #F9F871;
          }

          > span {
            margin-left: 5px;
          }
        }

        > .copy-shadow {
          filter: blur(5px);
          transform: scale(1.05);
        }

        > .remove {
          font-size: 24px;
          position: absolute;
          right: 10px;
          top: 10px;
          opacity: 0;
          color: #C1ADE3;
          cursor: pointer;
          filter: drop-shadow(0 0 10px #C1ADE3);
          //transform: translateY(-50%) translateX(50%);
          transition: all .4s;
        }
      }
    }

  }

}
